<template>
    <div class="header">
        我的小滴
    </div>
    <div class="content">
        <div>
            <!--头像-->
            <van-image round width="5rem" height="5rem" style="margin-left: 190px; margin-top: 110px;"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <div style="margin-left: 200px;">
                <div style="padding-bottom: 10px;">华杉科技</div>
                <van-button type="primary" size="small" @click="logout">退出登录</van-button>
            </div>

        </div>
    </div>
    <div class="detail" v-for="item in 6">

        <van-cell title="单元格" is-link :icon="gr" />


    </div>

</template>

<script setup>
import gr from '../assets/gr_1.png'

const logout = () => {
    alert("退出登录");

}


</script>

<style scoped>
.content {
    background: url(../assets/banner5.png) no-repeat;
    width: 100%;
    height: 330px;
    background-size: 100% 100%;
}

/* 头部样式 */
.header {
    height: 50px;
    width: 100%;
    background-color: #178d8d;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 800;
}

.detail {
    height: 50px;
    width: 80%;
    border: 1px solid black;
    margin-top: 17px;
    border-radius: 8px;
    margin-left: 10%;
    margin-bottom: 5px;
}

.van-cell {
    border-radius: 10px;
    height: 100%;
}

:deep(.van-icon__image) {
    padding-top: 5px;
}
</style>